import React, { useEffect } from "react";
import { Modal, Form, Input, Select, Alert } from "antd";
import { useTranslation, Trans } from "react-i18next"; // 引入react-i18next

export default function Recharge(props) {
  const { open, hideModal, listData, form } = props; //  listData 接受父组件列表的数据
  const { t, i18n } = useTranslation();
  const content = listData.content;
  const { TextArea } = Input;

  useEffect(() => {
    form.setFieldsValue({
      accountBalance: content,
    });
  }, [listData]);

  return (
    <div>
      <Modal
        // title="充值"
        title={t("buttons.Recharge")}
        open={open}
        onOk={hideModal}
        onCancel={hideModal}
        okText={t("buttons.confirm")}
        // okText="确认"
        cancelText={t("buttons.cancel")}
        // cancelText="取消"
        style={{
          top: 20,
          paddingTop: "10px",
        }}
      >
        <Alert
          // message="完整银行卡号为 : 银行代码 + 分行号 + 账号"
          message={t("message.CartMessage")}
          type="warning"
          banner
        />
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
          style={{ marginTop: "10px" }}
        >
          <Form.Item
            label={t("form.Paymentmethod")}
            // label="支付方式"
            name="withdrawalAmount"
          >
            <Select mode="multiple">
              <Select.Option value="demo">Demo</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            // label="户名"
            label={t("form.Accountname")}
            name="accountBalance"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={t("form.AccountNo")}
            // label="账号"
            name="withdrawalMoney"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={t("form.Bankname")}
            // label="银行名称"
            name="withdrawalount"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={t("form.Bankaddress")}
            //  label="银行地址"
            name="lockedParty"
          >
            <Input />
          </Form.Item>
          <Form.Item label="SWIFT CODF" name="withdrawalAmot">
            <Input />
          </Form.Item>
          <Form.Item
            label={t("form.bankcode")}
            // label="银行代码"
            name="widrsdawalAmount"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label={t("form.BranchNo")}
            // label="分行号"
            name="withdr1awalAmount"
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
